<template>
  <div class="makeCard"><!--  v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"-->
    <el-dialog title="批量制卡" class="noselect"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div style="margin: 20px;"></div>
      <el-form :model="modelForm" ref="modelForm" label-width="100px" class="demo-ruleForm">

        <el-form-item>
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">卡类型</div>
            <div style="border:1px solid #ccc; text-align: left">
              <el-radio-group  v-model="modelForm.cardType">
                <el-radio :label="i.id" :key="i.id" :value="i.id" v-for="i in typeList" style="margin: 10px;">{{i.name}}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>

     <!--   <el-form-item label=" ">
                <div class="el-from-item_title">卡类型</div>
                <div class="el-from-item_content text-left" style="margin-left:80px">
                <el-radio-group v-model="modelForm.cardType">
                    <el-radio :label="i.id" :value="i.id" v-for="i in typeList">{{i.name}}</el-radio>
                </el-radio-group>
                </div>
        </el-form-item>-->


        <el-form-item label=" " prop="cardPre" :rules="[{ required: true, message: '请输入卡号前缀', trigger: 'blur'}]">
          <el-input placeholder="请输入卡号前缀" v-model="modelForm.cardPre" auto-complete="off" :maxlength="15" size="medium" >
            <template slot="prepend">
              <el-tooltip placement="top" content="卡号前缀">
                <el-button tabIndex="-1">卡号前缀</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">尾数去除</div>
            <div style="border:1px solid #ccc;  text-align: left">
              <el-checkbox-group v-model="modelForm.exclude">
                <el-checkbox style="margin: 10px;" label="4" ></el-checkbox>
                <el-checkbox style="margin: 10px;" label="7" ></el-checkbox>
                <el-checkbox style="margin: 10px;" label="13" ></el-checkbox>
                <el-checkbox style="margin: 10px;" label="18" ></el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>

        <el-form-item label=" " prop="name">
          <div class="el-input el-input-group el-input-group--prepend el-input--medium">
            <div class="el-input-group__prepend" tabindex="-1">制卡类型</div>
            <el-select v-model="modelForm.makeCardType" placeholder="请选择制卡类型" class="w-100p">
              <el-option
                v-for="item in makeCardTypes"
                :key="item.key"
                :value="item.key"
                :label="item.text">
              </el-option>
            </el-select>
          </div>
        </el-form-item>

       <!-- <el-form-item label=" ">
                <div class="el-from-item_title">尾数去除</div>
                <div class="el-from-item_content text-left" style="margin-left:107px">
                    <el-checkbox-group v-model="modelForm.exclude">
                      <el-checkbox label="4" ></el-checkbox>
                      <el-checkbox label="7" ></el-checkbox>
                      <el-checkbox label="13" ></el-checkbox>
                      <el-checkbox label="18" ></el-checkbox>
                    </el-checkbox-group>
                </div>
        </el-form-item>-->

        <el-row class="batchCard">
          <el-col :span="12">
            <el-form-item class="startNo" label=" " prop="startNo" :rules="[{ required: true, message: '请输入起始编号', trigger: 'blur'}]">
              <el-input placeholder="起始编号，只能填写数字" v-model="modelForm.startNo" auto-complete="off" :maxlength="15" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="起始编号，只能填写数字">
                    <el-button tabIndex="-1">起始编号</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label=" " class="count" prop="count" :rules="[{ required: true, message: '请输入制卡数量', trigger: 'blur'}]">
              <el-input placeholder="请输入制卡数量" v-model="modelForm.count" auto-complete="off" :maxlength="15" size="medium" >
                <template slot="prepend">
                  <el-tooltip placement="top" content="制卡数量">
                    <el-button tabIndex="-1">数量</el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
       <!-- <div>
              <div class="el-from-item_title text-left" style="margin-left:100px">起始编号</div>
              <el-row style="margin-left:206px;margin-right:100px">
                    <el-col :span="10">
                      <el-form-item :hide-required-asterisk="false" style="margin-left:0px;margin-right:0" class="clearFormMargin zhika" label=" " prop="startNo" :rules="[{ required: true, message: '请输入起始编号', trigger: 'blur'}]">
                        <el-input placeholder="只能填写数字" v-model="modelForm.startNo" auto-complete="off" :maxlength="15" size="medium"  style="width: 94%;" >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="4" style="line-height:36px">
                        复制
                    </el-col>
                    <el-col :span="10">
                      <el-form-item style="margin-left:0px;margin-right:0" class="clearFormMargin zhika" label=" " prop="count" :rules="[{ required: true, message: '请输入制卡数量', trigger: 'blur'}]">
                        <el-input placeholder="" v-model="modelForm.count" auto-complete="off" :maxlength="5" size="medium"  @blur="isDouble(modelForm,'count')" style="width: 94%;" >
                        </el-input>
                      </el-form-item>
                    </el-col>
              </el-row>
          </div>-->
        <el-form-item label=" " prop="deposit" :rules="[]">
          <el-input placeholder="" v-model.number="modelForm.deposit" auto-complete="off" :maxlength="5" size="medium" @blur="isDouble(modelForm,'deposit')">
            <template slot="prepend">
              <el-tooltip placement="top" content="办卡押金">
                <el-button tabIndex="-1">办卡押金</el-button>
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item>
          <div class="el-input el-input-group el-input-group--prepend">
            <div class="el-input-group__prepend">办卡有效期</div>
            <div style="border:1px solid #ccc;  text-align: left">
              <el-radio-group v-model="modelForm.period">
                <el-radio :label="i.key" :key="i.key" :value="i.key" v-for="i in periodTypes" style="margin: 10px;">{{i.text}}</el-radio>
              </el-radio-group>
            </div>
          </div>
        </el-form-item>

        <!--<el-form-item label=" ">
                <div class="el-from-item_title">办卡有效期</div>
                <div class="el-from-item_content text-left" style="margin-left:80px">
                    <el-radio-group v-model="modelForm.period">
                        <el-radio :label="i.key" :value="i.key" v-for="i in periodTypes">{{i.text}}</el-radio>
                    </el-radio-group>
                </div>
        </el-form-item>-->
      </el-form>
      <div class="foot-bar-button">
        <el-button :disabled="canSave" type="primary" size="medium" @click="submitForm('modelForm')">
          <span v-if="canSave"><i class="el-icon-loading"></i>提交中</span>
          <span v-else>提交</span>
        </el-button>
        <!--<el-button type="primary" @click="submitForm('modelForm')" size="medium">提交</el-button>-->
        <el-button @click="resetForm('modelForm')" size="medium">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//注意路径
export default {
  props: ["isShow", "id"], //参数
  data() {
    return {
      canSave:false,
      modelForm: {
        exclude:[]
//        type:'',
      },
      showDialog: false,
      activityId: "",
      isSave: true,
      downCategeryId: [],
      isUpdate: false,
      treeData: [],
      typeList:[],
      periodTypes:[],
      makeCardTypes:[]
    };
  },
  watch: {
    isShow: function(newValue, oldValue) {
      this.showDialog = newValue;
      this.canSave=false;
      if (newValue) {
        if (this.id != "") {
          this.activityId = this.id;
          this.isSave = false;
          this.isUpdate = true;

          this.$axios
            .get("members/batchCardRecords/" + this.activityId + "/update")
            .then(data => {
              this.modelForm = data.content.batchCardRecord;
              this.typeList=data.content.typeList;
              this.periodTypes=data.content.periodTypes;
              this.makeCardTypes=data.content.makeCardTypes;
            });
        } else {
          this.isSave = true;
          this.isUpdate = false;
          this.$axios.get("members/batchCardRecords/create").then(data => {
            data.content.batchCardRecord.exclude=[];
            this.typeList=data.content.typeList;
            if(this.typeList.length>0){
              data.content.batchCardRecord.cardType=data.content.typeList[0].id;
            }
            this.modelForm = data.content.batchCardRecord;
            this.periodTypes=data.content.periodTypes;
              this.makeCardTypes=data.content.makeCardTypes;
          });
        }
      }
    }
  },
  created() {
    window.this = this;
  },
  methods: {
    newLabel(newList) {
      if (newList) {
        for (var i = 0; i < newList.length; i++) {
          newList[i].label = newList[i].name;
          newList[i].value = newList[i].id + "";
          newList[i].children = null;
        }
      }
    },
    goBack() {
      this.router.go(-1);
    },
    goCommit(){
      if (this.isSave) {
        this.$axios
          .post("members/batchCardRecords/create", this.modelForm)
          .then(data => {
            if (data.status == 200) {
              this.$message({
                message: data.message,
                type: "success"
              });
              this.$emit("addSuccess");
            } else {
              this.$message.error(data.message);
            }
          });
      } else {
        this.modelForm._method = "PUT";
        this.$axios
          .put(
            "members/batchCardRecords/" + this.activityId + "/update",
            this.modelForm
          )
          .then(data => {
            if (data.status == 200) {
              this.$message({
                message: data.message,
                type: "success"
              });
              this.$emit("addSuccess");
            } else {
              this.$message.error(data.message);
            }
          });
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.modelForm);
      var exclude=JSON.stringify(this.modelForm.exclude);
          this.modelForm.exclude=exclude;
          var item={};
          item.cardPre=this.modelForm.cardPre;
          item.startNo=this.modelForm.startNo;
          item.count=this.modelForm.count;
          item.exclude=exclude;
          if(this.canSave){
            return;
          }
          this.canSave=true;
          this.$axios.get("members/batchCardRecords/verifyRepeat",item).then(res=>{
            this.canSave=false;
            if (res.status == 200 && res.content==true) {
                  this.$message.error("当前制卡存在重复卡号")
              return;
            } else {
             this.goCommit();
            }
          },res=>{})

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$emit("close");
      this.showDialog = false;
    },
    handleClose(done) {
      this.$emit("close");
      done();
    },
    isNum(item, key) {
      var r = /^\+?[1-9][0-9]*$/;
      if (!r.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    },
    isDouble(item, key) {
      var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!isNum.test(item[key])) {
        item[key] = "0.00";
      } else {
        item[key] = item[key];
      }
    }
  }
};
</script>
<style scoped>
.el-from-item_title {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #48576a;
  line-height: 1;
  padding: 11px 12px 11px 0;
  box-sizing: border-box;
}
.el-from-item_content {
  line-height: 36px;
  position: relative;
  font-size: 15px;
}

</style>
